<template>
    <mavon-editor ref="editor" class="editor"
                  :value="value"
                  :autofocus="false"
                  @input="onValue"
                  @imgAdd="onImageAdd">

    </mavon-editor>
</template>

<script lang="ts">
import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
import { uploadImage } from '@/services/upload.service';

@Component({
    name: 'KMarkdown',
    components: {
        'mavon-editor': () => import(/* webpackChunkName: "markdown" */ './proxy')
    }
})
export default class Page extends Vue {
    @Prop({ type: String, default: '' }) value!: string;

    private d_value: string = '';

    mounted() {
        this.d_value = this.value;
    }

    @Watch('value')
    onValueChange (val: string, oldVal: string) {
        if (val !== this.d_value) {
            this.d_value = val
        }
    }

    onValue(string: string) {
        this.$emit('input', string);
    }

    onImageAdd(pos: any, $file: any) {
        uploadImage({
            group_id: 0,
            file: $file
        })
            .then(result => {
                (this.$refs['editor'] as any).$img2Url(pos, result.data.src);
            })
    }
}
</script>

<style lang="scss">
.editor.shadow {
    box-shadow: none !important;
    border: solid 1px #DCDFE6 !important;
    width: 100%;
}
</style>
